<template>
    <div class="wrapper">
        <header class="header">
            <x-header class="headerContent" :left-options="{backText: ''}"><span class="title">天气预报</span></x-header>
        </header>
        <div class="parent">
            <div class="top">
                <span class="city">{{locationCity}}</span>
            </div>
        </div>
        <!-- <scroller lock-x> -->
            <div class="scroller">
                <div class="scroller_son">
                    <span class="scrollerTitle">{{month}}月{{date}}日   周{{day}}</span>
                </div>
                <div class="temp">
                    <span>{{tmp}}°</span>
                </div>
                <div class="cond">
                    <span class="city">{{cond_txt}} </span>
                    <img class="now-conditions" :src="cond_code | formatCond">
                </div>
                <div class="airParent">
                    <div class="air">
                        <div>
                            <span><i class="iconfont icon-orientatione"></i>{{aqi}} {{qlty}}</span>
                        </div>
                        <div class="sp">
                            <span><i class="iconfont icon-Group"></i> {{tmp_min}}° ~ {{tmp_max}}°</span>
                        </div>
                    </div>
                    <div class="air">
                        <div>
                            <span><i class="iconfont icon-orientation wind"></i>{{wind_dir}} {{wind_sc}}级</span>
                        </div>
                        <div class="sp">
                            <span><i class="iconfont icon-Fill"></i> 湿度 {{hum}}%</span>
                        </div>
                    </div>
                </div>
                <div class="list">
                    <div class="temp-list-item" 
                        v-for="(value, index) in forecast" 
                        :key="'temp' + index">
                        <span class="week">{{value.week}}</span>
                        <span class="week">{{value.month}}/{{value.date}}</span>
                        <span class="week">{{value.cond_txt_d}}</span>
                        <img class="week png" :src="value.cond_code_d | formatCond">
                        <span class="week pad">{{value.tmp_max}}°</span>
                        <img class="week pic pad" src="../assets/weather/temp-area.png" >
                        <span class="week pad">{{value.tmp_min}}°</span>
                        <img class="week png" :src="value.cond_code_n | formatCond">
                        <span class="week">{{value.cond_txt_n}}</span>
                    </div>
                </div>
            </div>
        <!-- </scroller> -->
    </div>


</template>
<script>
import { XHeader } from 'vux'
import { weatherUrl } from '../config/index.js'
import API from '../config/api_user.js'
export default {
    name: 'weather',
    components: {
        XHeader
    },
    data () {
        return {
            location: 'CN101010100',
            key: '7b7b2605e91d46a19f1eaa79394435bc',
            locationCity: null,
            month: null,
            date: null,
            day: null,
            tmp: null,
            cond_txt: null,
            cond_code: null,
            wind_dir: null,
            wind_sc: null,
            hum: null,
            aqi: null,
            qlty: null,
            apiColor: null,
            forecast: [],
            divisionDataG: null
        }
    },
    created () {
        this.weatherNow()
        this.airNow()
        this.WeatherForecast()
    },
    methods: {
        //实时天气
        weatherNow () {
            let params = {
                location: this.location,
                key: this.key
            }
            API.weatherNow(params).then(res => {
                let data = res.HeWeather6[0]
                let now = data.now
                let time = new Date()
                const weekArr = ['日', '一', '二', '三', '四', '五', '六']
                this.locationCity = data.basic.location
                this.month = time.getMonth() + 1
                this.date = time.getDate()
                this.day = weekArr[time.getDay()]
                this.tmp = now.tmp
                this.cond_txt = now.cond_txt 
                this.cond_code = now.cond_code
                this.wind_dir = now.wind_dir
                this.wind_sc = now.wind_sc
                this.hum = now.hum
            })
        },
        //实时空气
        airNow () {
            let params = {
                location: this.location,
                key: this.key
            }
            API.airNow(params).then(res => {
                const data = res.HeWeather6[0].air_now_city
                this.aqi = data.aqi
                this.qlty = data.qlty
                this.apiColor = this.formatApiColor(this.aqi)
            })
        },
        //七天
        WeatherForecast () {
            let params = {
                location: this.location,
                key: this.key
            }
            API.WeatherForecast(params).then(res => {
                const data = res.HeWeather6[0].daily_forecast
                const weekArr = ['日', '一', '二', '三', '四', '五', '六']
                data.forEach((value, index) => {
                    let date = new Date(value.date)
                    if (index === 0) {
                        value.week = '今天'
                    } else if (index === 1) {
                        value.week = '明天'
                    } else if (index === 2) {
                        value.week = '后天'
                    } else {
                        value.week = '周' + weekArr[date.getDay()]
                    }
                    value.month = date.getMonth() + 1
                    value.date = date.getDate()
                })
                this.forecast = data
            })
        },
        formatApiColor (num) {
            let str = ''
            num = parseInt(num)
            if (num >= 0 && num <= 50) {
                str = '#40c057'
            } else if (num > 50 && num <= 100) {
                str = '#82c91e'
            } else if (num > 100 && num <= 150) {
                str = '#f76707'
            } else if (num > 150 && num <= 200) {
                str = '#e03131'
            } else if (num > 200 && num <= 300) {
                str = '#841c3c'
            } else if (num > 300) {
                str = '#540822'
            }
            return str
        }
    },
    computed: {
        tmp_min () {
            if (this.forecast.length !== 0) {
                return this.forecast[0].tmp_min
            } else {
                return null
            }
        },
        tmp_max () {
            if (this.forecast.length !== 0) {
                return this.forecast[0].tmp_max
            } else {
                return null
            }
        }
    },
    filters: {
        formatCond (value) {
            return value ? require('../assets/weather/' + value + '.png') : ''
        }
    }
}
</script>
<style lang="less" scoped>
    .wrapper {
        width: 100%;
        height: 100%;
        background-image: linear-gradient(to bottom,#6F86D6,#48C6EF);
    }
    .header{
        width: 100%;
    }
    .title{
        font-size: 16px;
        font-family:ArialMT;
        color:rgba(255,255,255,1);
        line-height:18px;
        letter-spacing:1px;
    }
    .headerContent{
        background:linear-gradient(127deg,rgba(255,199,38,1) 0%,rgba(249,151,22,1) 100%);
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .parent{
        width: 100%;
        .top{
            width: 100%;
            height: 1.066667rem;
            line-height: 1.066667rem;
            // font-size: 16px;
            font-size: 18px;
            color: white;
            text-align: center;
            font-family: wxcIconFont;
        }
    }
    .scroller{
        width: 100%;
        .scroller_son{
            width: 100%;
            height: .6rem;
            text-align: center;
            .scrollerTitle{
                font-size: 14px;
                color: #fff;
            }
        }
        .temp{
            width: 100%;
            height: 1.55rem;
            text-align: center;
            span{
                font-size: 44px;
                color: #fff;
            }
        }
        .cond{
            width: 100%;
            height: .933333rem;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            .city{
                font-size: 14px;
                color:#fff;
            }
            .now-conditions{
                display: inline-block;
                width: .666667rem;
                height: .626667rem;
                line-height: .466667rem;
                margin-left: .133333rem;
            }
        }
        .airParent{
            width: 100%;
            margin-top: .4rem;
            .air{
                width: 100%;
                height: .8rem;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                padding: 0 .4rem;
                div{
                    width: 3rem;
                    height: 100%;
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-start;
                    align-items: center;
                    span{
                        color: #fff;
                        font-size: 13px;
                        i {
                            display: inline-block;
                            width: .5rem;
                            height: .6rem;
                            line-height: 0.6rem;
                        }
                        .wind{
                            font-size: 12px;
                        }
                    }
                }
                .sp{
                    width: 2.3rem;
                }
            }
        }
        .list{
            width:100%;
            height: 6.666667rem;
            display:flex;
            flex-direction: row;
            justify-content: space-between;
            padding: 0 .4rem;
            margin-top: .4rem;
            .temp-list-item{
                width: 1.333333rem;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: center;
                background-color: rgba(255,255,255,0.2);
                position: relative;
                padding: .266667rem 0;
                .week{
                    font-size: 12px;
                    padding-bottom: .2rem;
                    color: #fff;
                }
                .pic{
                    width: .666667rem;
                    height: 1rem;
                }
                .png{
                    display:block;
                    width: .733333rem;
                    height: .76rem;
                }
            }
            
            .temp-list-item:after{
                content: '';
                position: absolute;
                left: 0;
                bottom: 0;
                background: #cccccc;
                width: 1px;
                height: 100%;
                -webkit-transform: scaleY(0.5);
                transform: scaleY(0.5);
                -webkit-transform: rotateY(180deg);
                transform: rotateY(180deg);
                -webkit-transform-origin: 0 0;
                transform-origin: 0 0;
            }
            .temp-list-item:first-child:after{
                content: '';
                position: absolute;
                left: 0;
                bottom: 0;
                width: 0px;
            }
        }
    }
    
</style>

